import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import classNames from 'classnames'
import { delTodo } from '../../store/actions/todo'

export default function TodoMain() {
  const dispatch = useDispatch()
  const list = useSelector((state) => state.todo)
  // !#4
  const todoDel = (id) => dispatch(delTodo(id))
  return (
    <section className='main'>
      <input id='toggle-all' className='toggle-all' type='checkbox' />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      <ul className='todo-list'>
        {list.map((item) => (
          <li
            key={item.id}
            className={classNames({
              completed: item.done,
            })}
          >
            <div className='view'>
              <input
                className='toggle'
                type='checkbox'
                checked={item.done}
                onChange={() => {}}
              />
              <label>{item.name}</label>
              <button
                className='destroy'
                onClick={() => todoDel(item.id)}
              ></button>
            </div>
            {/* 编辑功能 */}
            <input
              className='edit'
              value='Create a TodoMVC template'
              onChange={() => {}}
            />
          </li>
        ))}
      </ul>
    </section>
  )
}
